<template>
    <div >
        <!-- 导航区域 -->
         <h4 class='headline'>
              {{details.title}} 
        </h4>
        <div class="Like">             
            <span>{{details.add_time|dateFormat()}}</span>
            <span>点击：{{details.click}}次</span>            
		</div>
        <hr>
        <p></p>
         <!-- 缩略图 -->
          <vue-preview :slides="thumbsList" class="imgPrev"></vue-preview>
        <!-- 评论区 -->
        <Comments :uid='id'></Comments>
    </div>
</template>
<script>
import Comments from '../newList/conlist/com.vue';
export default {
    data() {
        return {
            id:this.$route.params.id,
            details:{},
            thumbsList:[]
        }
    },
    created() {
        this.getuiList(),
        this.getInfoSub()
    },
    methods: {
         getuiList(){
            this.$http.get('api/getimageInfo/'+this.id).then(nav=>{
                // console.log(nav);
                
                this.details=nav.body.message[0]
            })
        },
        getInfoSub(){
             this.$http.get('api/getthumimages/'+this.id).then(result=>{
                if(result.body.status == 0){
                      result.body.message.forEach(item => {
                        item.w = 600;   //设置以大图浏览时的宽度
                        item.h = 400;     //设置以大图浏览时的高度
                        item.src = item.src;  //大图
                        item.msrc = item.src;  //小图
                    });            
                    this.thumbsList =  result.body.message;
                }
                

            })
        },
        
    },
    components:{
        Comments
    }
}
</script>
<style lang="scss" scoped>
     
   .Like{
    display: flex;
       justify-content: space-between; 
       font-size:12px;
       }
       .imgPrev {
        /deep/ .my-gallery {
        display: flex;
        flex-wrap: wrap;
        figure {
          width: 30%;
          margin: 5px;
        img {
           width: 100%;
        }
       }
     }
}
</style>